<template>
  <div class="app-container">
    <div class="canvas-container">
      <div class="canvas"
           :style="{ width: '96%', height: '98%', border: '1px solid #000', overflow: 'auto' }"
      >
        <img :src="previewImage" style="width: 100%; height: auto;">
      </div>
      <span style="font-size: 12px; color: red;">注意：预览最多生成100个，下载则按指定个数生成</span>
    </div>
    <div class="form-data">
      <div>
        <el-button type="success" size="mini" @click="submitConfig">保 存</el-button>
        <el-button type="primary" size="mini" @click="download">下载PDF</el-button>
      </div>
      <div>
        <el-divider content-position="left">基本设置</el-divider>
        <el-form ref="baseForm" :model="formData" size="mini"
                 :rules="baseRules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="模板名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入模板名称,修改名称可以新名称保存" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抬头名称" prop="title">
                <el-input v-model="formData.title" placeholder="请输入抬头名称,标签显示名称" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="溯源网址" prop="webSite">
                <el-input v-model="formData.webSite" placeholder="请输入溯源网址，id变量放最后" disabled/>
              </el-form-item>
            </el-col>
            <span style="font-size: 12px; color: red;margin: 20px 20px">如需调整单个标签的抬头、尺寸等设置，请在【设计预览】中调整.</span>
          </el-row>
        </el-form>
        <el-divider content-position="left">打印排版</el-divider>
        <el-form ref="printForm" :model="printData" size="mini"
                 :rules="printRules" label-width="80px">
          <el-row>
            <el-col :span="14">
              <el-form-item label="起始编号" prop="firstId">
                <el-input-number v-model="printData.firstId" controls-position="right" :min="0" :step="1"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="生成个数" prop="idCnt">
                <el-input-number v-model="printData.idCnt" controls-position="right" :min="0" :step="1" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打印布局" prop="print">
                每行 <el-input-number v-model="printData.columns" controls-position="right" :min="1" :step="1"  style="width: 65px"/> 个，
                <el-checkbox v-model="printData.emptyBox">间隔打印</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分 割 线" prop="print">
                <el-checkbox v-model="printData.dividerV">横向</el-checkbox>
                <el-checkbox v-model="printData.dividerH">纵向</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {preprintConfig, saveSetting, downloadPdf} from '@/api/config'

const baseURL = process.env.VUE_APP_BASE_API
const BASE_GATEWAY = process.env.VUE_APP_GATEWAY_BASE

export default {
  name: 'Canvas',
  props:{
    callback:{
      type:Boolean,
      default: false
    },
    formData:{
      type: Object,
      default:()=>{
        return {
          width: 240,
          height: 240,
          title: '',
          webSite: ''
        };
      }
    }
  },
  data() {
    return {
      loading: null,
      itemMap: {},
      draggingItem: null,
      dragging: false,
      dragStart: { x: 0, y: 0 },
      itemDragStart: { x: 0, y: 0 },
      previewImage: null,
      printData: {},
      baseRules:{

      },
      printRules:{

      },
      imageRules:{

      }
    };
  },
  watch:{
    formData:{
      handler(newData, oldData) {
        if(this.itemMap.titleItem) {
          this.refresh();
        }
      },
      deep: true,
      immediate: true // 立即执行
    },
    printData:{
      handler(newData, oldData) {
        if(this.itemMap.titleItem) {
          this.refresh();
        }
      },
      deep: true,
      immediate: true // 立即执行
    }
  },
  created(){
    this.printData = {
      firstId: 987654321012,
      idCnt : 8,
      emptyBox: true,
      columns: 7,
      dividerH: false,
      dividerV: true
    }
  },
  methods: {
    openLoading(){
      if(this.loading) this.loading.close();
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    refresh(row){
      var qry = { };
      qry.name = row ? row.name : this.formData.name;
      this.openLoading()
      preprintConfig(qry).then(rsp=>{
        var imgData = rsp.preview ? "data:image/png;base64," + rsp.preview : null;
        this.previewImage = imgData;
        this.printData = rsp.setting;
        if(this.loading){
          this.loading.close();
          this.loading = null;
        }
      },reject=>{
        if(this.loading){
          this.loading.close();
          this.loading = null;
        }
      });
      //console.log(this.itemMap)
    },
    download(){
      this.openLoading();
      downloadPdf({name: this.formData.name}).then(rsp=>{
        var {fileName, fileType, realName} = rsp;
        this.$message({
          message: '生成PDF成功,开始下载文件:' + fileName,
          type: 'success'
        });

        this.refresh();
        this.downloadFile(fileName,fileType,realName,"/codes");
      },reject=>{
        if(this.loading){
          this.loading.close();
          this.loading = null;
        }
      });
    },
    submitConfig(){
      let name = this.formData.name;
      this.openLoading();
      saveSetting(name,this.printData).then(response => {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.refresh();
      },reject=>{
        if(this.loading){
          this.loading.close();
          this.loading = null;
        }
      });
    },
    downloadFile(fileName, fileType, realName, basePath) {
      if(!basePath){
        basePath = baseURL + BASE_GATEWAY;
      }

      var params = "fileName=" + fileName + "&delete=true";
      if(fileType) params += "&fileType=" + fileType ;
      if(realName) params += "&realName=" + realName;
      window.location.href = basePath + "/base/pageHelper/file/dl?" + encodeURI(params);
    }

  },
};
</script>

<style lang="scss" scoped>
.app-container{
  width: 100%;
  display: inline-block;

::v-deep  .canvas-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: 60%;
    min-width: 300px;
    height: 300px;
    overflow: auto;
    text-align: center;
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
    background-position: 0 0, 13px 13px;
    background-size: 26px 26px;

    .canvas {
      position: relative;
      overflow: hidden;

      margin: 25px auto;
      transform-origin: center top;
      box-shadow: 0 0 5px 1px #ccc;
      background-color: #fff;
      background-repeat: no-repeat;
    }

    .item {
      border: 1px solid #ccc;
      padding: 0 0;
      background: #fff;
      resize: both;
      overflow: auto;
      box-sizing: border-box;
    }

    .controls {
      margin-top: 10px;
    }
  }

  .form-data{
    width: 40%;
    float: right;

    .el-divider--horizontal{
      margin: 12px 0;
      .el-divider__text {
        font-weight: bold;
      }
    }

    .el-form-item__label{
      font-weight: bold;
    }
  }
}

::v-deep .el-input-number.is-controls-right .el-input__inner{
  padding-left: 5px;
  padding-right: 40px;
}
</style>
